
$(function () {

    // var layer = layui.layer;
    const form = layui.form
    const laypage = layui.laypage
    q = {
        advposdesc: "",
        advposname: "",
        page: 1,
        limit: 4,//分页默认一页4条数据
    }

    

    // 1.获取广告位列表
    getCateList()
    function getCateList() {
        $.ajax({
            url: 'http://124.223.14.236:8060/admin/ydd_advpos/list',
            method: 'get',
            data: q,
            headers: {
                "x-token": localStorage.getItem('token')
            },
            success: function (res) {
                // console.log(res);
                if (res.errno !== 0) {
                    return layer.msg(res.errmsg);
                }

                const { count } = res.data
                const htmlTpl = res.data.data.map((item,i) => {

                    const { id, advposname, advposdesc, advpossize, advposnum } = item
                    return `
                    <tr>
              <td>${i+1}</td>
              <td>${advposname}</td>
              <td>${advposdesc}</td>
              <td>${advposnum}</td>
              <td>${advpossize}</td>
              <td>
        <button type="button" class="layui-btn layui-btn-xs edit-btn" data-id="${id}">编辑</button>
      <button type="button" class="layui-btn layui-btn-danger layui-btn-xs del-btn" data-id="${id}">删除</button>
              </td>
            </tr>
                    
                    `
                }).join('')
                $("tbody").html(htmlTpl);

                // 渲染分页
                renderPage(count)
            }
        })
    }

    // 7.分页器渲染
    function renderPage(count) {
        laypage.render({
            elem: 'page-box',
            count: count,
            limit: q.limit,
            curr: q.page,
            
            layout: ["count", "limit", "prev", "page", "next", "skip" ],
            limits: [1, 2, 4, 6, 8, 10],
            jump: function(obj, first){
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj);
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数
                // 修改查询参数
                q.page = obj.curr;
                q.limit = obj.limit;

                //首次不执行
                if(!first){
                  //do something
                  getCateList()
                }
              }  
        })
    }


    let layerIndex = null
    // 2.新增功能
    $('#add-cate').on('click', function () {
        layerIndex = layer.open({
            type: 1,
            title: '添加广告位',
            area: ['600px', '400px'],
            content: $('#addCateTpl').html()
        })
    })

    // 3.监听新增form表单提交事件
    $('body').on('submit', '#form-add', function (e) {
        e.preventDefault()
        // console.log('添加分类请求');
        $.ajax({
            url: 'http://124.223.14.236:8060/admin/ydd_advpos/add',
            method: 'POST',
            data: $(this).serialize(),
            headers: {
                "x-token": localStorage.getItem('token')
            },
            success: function (res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg("添加数据失败");
                }
                layer.msg("添加成功！");
                getCateList()
                layer.close(layerIndex);
            }
        })
    })


    // 4.点击了编辑按钮，弹起编辑弹框
    $('body').on('click', '.edit-btn', function () {
        // console.log('点击了编辑按钮');
        const id = $(this).attr("data-id");
        console.log(id);
        $.ajax({
            url: "http://124.223.14.236:8060/admin/ydd_advpos/rowInfo?id=" + id,
            headers: {
                "x-token": localStorage.getItem('token')
            },
            method: "GET",
            success: function(res) {
              console.log(res.data);//拿到编辑id对应的数据
              if (res.errno !== 0) {
                return layer.msg(res.errmsg);
              }
            //    表单回显
              form.val('formEdit', res.data);
            },
          });


        layerIndex = layer.open({
            type: 1,
            title: '修改广告位',
            area: ['600px', '400px'],
            content: $('#editCateTpl').html()
        })
    })
    // 5.监听编辑form表单提交事件
    $('body').on('submit', '#form-edit', function(e) {
        e.preventDefault()
        $.ajax({
            url: 'http://124.223.14.236:8060/admin/ydd_advpos/update',
            method: 'POST',
            // data: {
            //     // id: Id,
            //     advposname: "string",
            //     advposdesc: "string",
            //     advpossize: "string"

            // },
            data: $(this).serialize(),
            
            headers: {
                "x-token": localStorage.getItem('token')
            },
            success: function(res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg(res.errmsg);
                  }
                  layer.msg("更新成功");
                  getCateList()
                  layer.close(layerIndex);

            }
        })
    })


    // 6.对删除按钮注册点击事件，删除此行数据
    $('body').on('click', '.del-btn', function() {
        // console.log('点击了删除按钮');
        const twoId = $(this).attr("data-id");
        console.log(twoId);
        // 6.1弹框二次确认删除
        layer.confirm('确认删除?', {icon: 3, title:'提示'}, function(index){
            //do something
        // 6.2 用点击确认按钮，调用删除接口
        $.ajax({
            url: "http://124.223.14.236:8060/admin/ydd_advpos/del?id=" + twoId,
            headers: {
                "x-token": localStorage.getItem('token')
            },
            method: "GET",
            success: function(res) {
                console.log(res);
                if (res.errno !== 0) {
                    return layer.msg(res.errmsg);
                  }
                  layer.msg("删除成功");
                  getCateList()
            }
        })
            layer.close(index);
          });
    })

    //8. 为搜索按钮绑定点击事件,获取搜索框内的值，传给列表广告名参数，再次渲染列表拿到对应的数据
    $('#search').on('click', function(e) {
        e.preventDefault()
        console.log('点击了搜索');
        const title = $('[name=title]')[0].value
        // console.log(title);
        q.advposname =  title
        getCateList()
    })

    

    // 9.为重置按钮绑定点击事件
    $('#refresh').on('click', function(e) {
        e.preventDefault()
        console.log('点击了重置'); 
        refresh()   
    })

    function refresh() {
        window.location.reload()//调用location的reload函数
    }




    


    
})